<%--
    @author Duminda Dharmakeerthi
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    var occupierIndex = 0;
    $(function () {
        $('#occupier-info').hide();
        $('#addOccupier').val($('#add-occupier').val());
        if (($('#approvalState').val() == "PENDING" || $('#approvalState').val() == "APPROVED") && $('#userRole').val() == 'ORDS') {
            $('#add-occupier-btn').hide();
        } else {
            $('#add-occupier-btn').show();
        }
        if ($('#landMode').val() == 'DETAIL') {
            occupierIndex = document.getElementById('occupierTable').rows.length;
            var count = 0;
            for (; count < occupierIndex; count++) {
                addOccupierValidationRule('occupier-name' + count);
                validateOccupierDate('occupier-dob' + count);
            }
        }
    });

    function validateDynamic(element) {
        alert(element.value);
        // $("#"+element).rules("add", {isDateFormated:true});
    }

    function addRow() {
        var table = document.getElementById('occupierTable');
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var str = '<td colspan="4">' +
                '<table class="width-100">' +
                '<tr><td>' + $("#occupierName").val() + '<span class="mandatory-field"></span></td><td colspan="3"><s:textarea id="occupier-name'+occupierIndex+'" name="land.occupiers['+occupierIndex+'].name" rows="1" cssClass="width-595-px"/></td></tr>' +
                '<tr><td>' + $("#occupierDOB").val() + ' <s:label value="%{getText(\'date_format.label\')}" cssClass="date-format"/></td><td><s:textfield type="text" id="occupier-dob'+occupierIndex+'" name="land.occupiers['+occupierIndex +'].dateOfBirth" onKeyPress="return dateNumbersOnly(event,true)" cssClass="width-200-px" /></td><td>' + $("#occupierNIC").val() +
                '</td><td><s:textfield type="text" id="occupier-nic'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].registrationNumberOrNIC" cssClass="width-200-px"/></td></tr>' +
                '<tr><td>' + $("#occupierAddr").val() + '</td><td colspan="3"><s:textarea id="occupier-address'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].contacts.address" rows="1" cssClass="width-595-px"/></td></tr>' +
                '<tr><td>' + $("#contactNo").val() + '</td><td>' + $("#occupierMobile").val() + '</td><td colspan="2"><s:textfield type="text" id="occupier-mobile'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].contacts.mobile" cssClass="width-200-px"/></td></tr>' +
                '<tr><td></td><td>' + $("#occupierLandPhone").val() + '</td><td colspan="2"><s:textfield type="text" id="occupier-land-phone'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].contacts.landPhone" cssClass="width-200-px"/></td></tr>' +
                '<tr><td>' + $("#occupierEmail").val() + '</td><td><s:textfield type="text" id="occupier-email'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].contacts.email" cssClass="width-200-px"/></td><td>' + $("#occupierFax").val() + '</td><td><s:textfield type="text" id="occupier-fax'+occupierIndex+'" name="land.occupiers[' + occupierIndex + '].contacts.fax" cssClass="width-200-px"/></td></tr>' +
                '<tr><td colspan="4" class="right-align"><input type="button" value="' + $("#delete").val() + '" onclick="deleteOccupier(' + occupierIndex + ')"/></td>' +
                '</table><hr/>' +
                '</td>';
        row.innerHTML = str;
        row.setAttribute('id', 'row' + occupierIndex);
        addOccupierValidationRule('occupier-name' + occupierIndex);
        validateOccupierDate('occupier-dob' + occupierIndex);
        occupierIndex++;
    }

    function deleteOccupier(id) {
        var table = document.getElementById('occupierTable');
        table.deleteRow($('#row' + id).index());
    }

    function addOccupierValidationRule(id) {
        $('#' + id).rules("add", {
            occupierName:true,
            messages:{
                occupierName: $('#enterOccupierName').val()
            }
        });
    }

    function validateOccupierDate(id) {
        $('#' + id).rules("add", {
            isDateFormated:true
        });
    }
</script>

<tr>
    <td colspan="4">
        <s:if test="land.approvalState.ordinal() == 2 && user.role.id == \"ORDS\"">
            <table id="occupierTable">
                <s:iterator status="status" value="land.occupiers">
                    <tr>
                        <td colspan='4'>
                            <table class='width-100'>
                                <s:hidden name="%{'land.occupiers['+( #status.count-1)+'].id'}"/>
                                <s:hidden name="%{'land.occupiers['+( #status.count-1)+'].contacts.id'}"/>
                                <tr>
                                    <td><s:label value="%{getText('name_of_occupier.label')}"/><span
                                            class="mandatory-field"></span></td>
                                    <td colspan='3'><s:textarea value="%{name}" cssClass="width-595-px" disabled="true"
                                                                name="%{'land.occupiers['+( #status.count-1)+'].name'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                                    <td><s:textfield value="%{dateOfBirth}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].dateOfBirth'}"
                                                     cssClass="width-200-px" disabled="true"
                                                     onKeyPress="return dateNumbersOnly(event,true)"/></td>

                                    <td><s:label value="%{getText('nic.label')}"/></td>
                                    <td><s:textfield value="%{registrationNumberOrNIC}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].registrationNumberOrNIC'}"
                                                     cssClass="width-200-px" disabled="true"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('address.label')}"/></td>
                                    <td colspan='3'><s:textarea value="%{contacts.address}"
                                                                cssClass="width-595-px" disabled="true"
                                                                name="%{'land.occupiers['+( #status.count-1)+'].contacts.address'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contact_number.label')}"/></td>
                                    <td><s:label value="%{getText('mobile.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.mobile}"
                                                                 name="%{'land.occupiers['+( #status.count-1)+'].contacts.mobile'}"
                                                                 cssClass="width-200-px" disabled="true"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><s:label value="%{getText('land_line.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.landPhone}"
                                                                 name="%{'land.occupiers['+( #status.count-1)+'].contacts.landPhone'}"
                                                                 cssClass="width-200-px" disabled="true"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contacts.email.label')}"/></td>
                                    <td><s:textfield value="%{contacts.email}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].contacts.email'}"
                                                     cssClass="width-200-px" disabled="true"/></td>
                                    <td><s:label value="%{getText('fax.label')}"/></td>
                                    <td><s:textfield value="%{contacts.fax}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].contacts.fax'}"
                                                     cssClass="width-200-px" disabled="true"/></td>
                                </tr>
                            </table>
                            <hr/>
                        </td>
                    </tr>
                </s:iterator>
            </table>
        </s:if>
        <s:else>
            <table id="occupierTable">
                <s:iterator status="status" value="land.occupiers">
                    <tr>
                        <td colspan='4'>
                            <table class='width-100'>
                                    <%--<s:form name="occupier%{( #status.count-1)}" method="GET">--%>
                                <s:hidden id="occupier%{( #status.count-1)}"
                                          name="%{'land.occupiers['+( #status.count-1)+'].id'}"/>
                                <s:hidden name="%{'land.occupiers['+( #status.count-1)+'].contacts.id'}"/>
                                <tr>
                                    <td><s:label value="%{getText('name_of_occupier.label')}"/><span
                                            class="mandatory-field"></span></td>
                                    <td colspan='3'><s:textarea value="%{name}" cssClass="width-595-px occupierName"
                                                                id="%{'occupier-name'+( #status.count-1)}"
                                                                name="%{'land.occupiers['+( #status.count-1)+'].name'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                                    <td><s:textfield value="%{dateOfBirth}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].dateOfBirth'}"
                                                     id="%{'occupier-dob'+( #status.count-1)}"
                                                     cssClass="width-200-px occupierDOB"
                                                     onKeyPress="return dateNumbersOnly(event,true)"/></td>

                                    <td><s:label value="%{getText('nic.label')}"/></td>
                                    <td><s:textfield value="%{registrationNumberOrNIC}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].registrationNumberOrNIC'}"
                                                     cssClass="width-200-px occupierNIC"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('address.label')}"/></td>
                                    <td colspan='3'><s:textarea value="%{contacts.address}"
                                                                cssClass="width-595-px occupierAddress"
                                                                name="%{'land.occupiers['+( #status.count-1)+'].contacts.address'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contact_number.label')}"/></td>
                                    <td><s:label value="%{getText('mobile.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.mobile}"
                                                                 name="%{'land.occupiers['+( #status.count-1)+'].contacts.mobile'}"
                                                                 cssClass="width-200-px occupierMobile"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><s:label value="%{getText('land_line.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.landPhone}"
                                                                 name="%{'land.occupiers['+( #status.count-1)+'].contacts.landPhone'}"
                                                                 cssClass="width-200-px occupierLandPhone"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contacts.email.label')}"/></td>
                                    <td><s:textfield value="%{contacts.email}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].contacts.email'}"
                                                     cssClass="width-200-px occupierEmail"/></td>
                                    <td><s:label value="%{getText('fax.label')}"/></td>
                                    <td><s:textfield value="%{contacts.fax}"
                                                     name="%{'land.occupiers['+( #status.count-1)+'].contacts.fax'}"
                                                     cssClass="width-200-px occupierFax"/></td>
                                </tr>
                                    <%--  <tr>
                                      <td colspan="4" align="right">
                                          <s:url id="removeOccupier" action="removeOccupier">
                                              <s:param name="landId" value="land.id"/>
                                              <s:param name="occupierId" value="%{land.occupiers[(#status.count-1)].id}"/>
                                          </s:url>
                                          <s:a href="%{removeOccupier}" title="%{getText('delete.label')}">
                                              <s:label value="%{getText('delete.label')}"/>
                                          </s:a>
                                      </td>
                                  </tr>  --%>
                            </table>
                            <hr/>
                        </td>
                    </tr>
                </s:iterator>
            </table>
        </s:else>
    </td>
</tr>
<tr id="add-occupier-btn">
    <td colspan="4" class="right-align"><input id="addOccupier" type="button" onclick="addRow()"/></td>
</tr>

<s:hidden id="occupierName" value="%{getText('name_of_occupier.label')}"/>
<s:hidden id="occupierDOB" value="%{getText('date_of_birth.label')}"/>
<s:hidden id="occupierAddr" value="%{getText('address.label')}"/>
<s:hidden id="occupierNIC" value="%{getText('nic_registration_no.label')}"/>
<s:hidden id="contactNo" value="%{getText('contact_number.label')}"/>
<s:hidden id="occupierMobile" value="%{getText('mobile.label')}"/>
<s:hidden id="occupierLandPhone" value="%{getText('land_line.label')}"/>
<s:hidden id="occupierEmail" value="%{getText('email.label')}"/>
<s:hidden id="occupierFax" value="%{getText('fax.label')}"/>
<s:hidden id="delete" value="%{getText('delete.label')}"/>
<s:hidden id="add-occupier" value="%{getText('add_occupier.label')}"/>

